<template>
  <el-dropdown
    placement="bottom-start"
    trigger="click"
    @command="handleSelect($event,list,rIndex,dIndex)"
  >
    <MenuButton svg="table2" />

    <template #dropdown>
      <el-dropdown-menu class="Fg-dropdown-menu">
        <el-dropdown-item
          v-for="item in defaultOptions(list,rIndex,dIndex)"
          :command="item.value"
          :key="item.value"
          :divided="item.divided"
          :disabled="item.disabled"
        >{{item.label}}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { defaultOptions } from "../../../utils/table";

export default {
  name: "TableOptions",
  props: {
    list: {
      type: Array,
      default: () => []
    },
    rIndex: {
      type: Number,
      default: 0
    },
    dIndex: {
      type: Number,
      default: 0
    }
  },

  methods: {
    defaultOptions,
    handleSelect(e) {
      this.$emit("command", e);
    }
  }
};
</script>

<style lang="scss" >
.Fg-dropdown-menu {
  .popper__arrow {
    display: none !important;
  }
}
</style>